<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="do" uri="/pages/tld/taglib.tld" %>
<%@ taglib prefix="sx" uri="/struts-dojo-tags" %>
<%@ taglib prefix="img" uri="/struts-images"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>User Profile</title>
    <link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/common.css"></link>
	<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/password.css"></link>
	<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/password.js" ></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/jquery-1.5.js" ></script>
	<script type="text/javascript" src="<%=request.getContextPath()%>/pages/js/jquery.validate.min.js" ></script>
	<script type="text/javascript">
		$().ready(function(){
		$("#updateUserForm").validate({
				rules: {
					fName : {
						required: true,
						minlength: 2
					},
					email : {
						required: true,
						email: true
					},
					teleNo : {
						number: true,
						minlength: 9
					},
					mobileNo : {
						number: true,
						minlength: 9
					},
					code : {
						required: true,
						number: true,
						minlength: 4,
						maxlength: 4
					}
				},
				messages: {
					fName : {
						required: "Please enter your firstname",
						minlength: "Your first name must consist of at least 2 characters"
					}
				}
		});
	});	
	
		function lookup(inputString) {
			if(inputString.length <5) {
				$('#suggestions').show();
				$('#autoSuggestionsList').hide();
			} else {
				$('#suggestions').hide();
				$.post("checkUsername.jsp",{user: ""+inputString+""},function(data){
				$('#autoSuggestionsList').html(data).show();
				});
			}
		}
	
	</script>
	<style>
<!--
.tbl{
	margin:10px;
  	border-spacing: 0px;
   	
}
.tbl tbody td{
  	padding:5px;
  	padding-left: 20px;
 }
 .tbl tbody tr:first-child td{
 	padding-top: 10px;
 }
 .tbl tbody tr:last-child td{
 	padding-bottom: 10px;
 }
.tbl thead tr{
	text-align: center;
	height:40px;
	font-size: 14px;
	text-transform: uppercase;
	font-weight: normal;
}
.tbl thead tr td{
	padding-left: 15px;
	padding-right: 15px;
}

-->
</style>
	<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/common.css"></link>
  </head>
  
  <body style="background-image: none;">
  	<div align="center">
  		<table style="width: 780px;height: 800px;">
	   		<thead style="background-image: url('images/sliced/20.jpg') ;background-repeat: no-repeat;">
				<tr>						
					<td colspan="2" style="color: #EE2C2C;font-size: 14pt;text-align: left;width: 780px;height: 50px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;USER PROFILE</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td  align="center" style="vertical-align: top;">
						<table  align="center">
							<tr>
								<td align="center" style="width: 500px;">
									<s:form theme="simple" id="updateUserForm" name="updateUserForm" action="editProfile">		
										<table class="tbl" style="width: 500px;">
										    <tr>
										        <td>First Name</td>
										        <td><s:textfield name="fName" value="%{#session['logedUser'].fName}" cssStyle="width:150px" /></td>
										    </tr>
										    <tr>
										        <td>Last Name</td>
										        <td><s:textfield name="lName" value="%{#session['logedUser'].lName}" cssStyle="width:150px" /></td>
										    </tr>
										    <tr>
										        <td valign="top">Address</td>
										        <td><s:textarea name="address" value="%{#session['logedUser'].address}" cssStyle="resize:none;width:150px; height:50px;" /></td>
										    </tr>
										    <tr>
										        <td>Contact No</td>
										        <td><s:textfield name="teleNo" value="%{#session['logedUser'].contactNo}" cssStyle="width:150px" /></td>
										    </tr>
										    <tr>
										        <td>Mobile No</td>
										        <td><s:textfield name="mobileNo" value="%{#session['logedUser'].mobileNo}" cssStyle="width:150px" /></td>
										    </tr>
										    <tr>
										        <td>E-mail</td>
										        <td><s:textfield name="email" value="%{#session['logedUser'].email}" cssStyle="width:150px" /></td>
										    </tr>
										    <tr>
										        <td>Password recovery code</td>
										        <td><s:textfield name="code" value="%{#session['logedUser'].code}" cssStyle="width:150px;" /></td>
										    </tr>
										    <tr>
										        <td></td> 
										        <td><s:submit value="Update User" cssClass="button" onclick="if (!confirm('Are you sure, you want to update this user?')) return false" /></td> 
										    </tr>
										    <tr>
										        <td><s:actionmessage cssClass="successMsg" /></td> 
										        <td><s:fielderror cssClass="errorMsg" /></td> 
										    </tr>
										</table>		
									</s:form>
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</tbody>
   		</table>
  	</div>
  </body>
</html>
